<template>
  <div class="test-plan-detail-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button
          type="text"
          @click="handleBack"
          class="back-button"
        >
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <h2 class="page-title">{{ testPlan?.name || '测试计划详情' }}</h2>
      </div>
      <div class="header-right" v-if="testPlan">
        <el-tag :type="getStatusType(testPlan.status || '')" size="large">
          {{ getStatusLabel(testPlan.status || '') }}
        </el-tag>
      </div>
    </div>

    <div class="test-plan-detail">
      <el-tabs v-model="activeTab">
      <!-- 基本信息 -->
      <el-tab-pane label="基本信息" name="info">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="计划名称">{{ testPlan?.name }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(testPlan?.status || '')">
              {{ getStatusLabel(testPlan?.status || '') }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="所属项目">{{ testPlan?.project_name }}</el-descriptions-item>
          <el-descriptions-item label="通过率">
            <span v-if="testPlan?.pass_rate !== null && testPlan?.pass_rate !== undefined">
              {{ testPlan.pass_rate }}%
            </span>
            <span v-else>-</span>
          </el-descriptions-item>
          <el-descriptions-item label="开始时间">
            {{ testPlan?.start_date || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="结束时间">
            {{ testPlan?.end_date || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="创建人">{{ testPlan?.creator_name }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">
            <span style="white-space: nowrap;">{{ testPlan?.created_at ? formatDateTime(testPlan.created_at) : '-' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="描述" :span="2">
            {{ testPlan?.description || '-' }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>

      <!-- 测试用例 -->
      <el-tab-pane label="测试用例" name="test-cases">
        <div class="test-cases-section">
          <div class="section-header">
            <span>关联的测试用例 ({{ testPlan?.test_cases?.length || 0 }})</span>
            <el-button
              type="primary"
              size="small"
              @click="handleAddTestCases"
              v-if="!isCompletedStatus(testPlan?.status || '')"
            >
              <el-icon><Plus /></el-icon>
              从用例库添加
            </el-button>
          </div>
          <el-table :data="testPlan?.test_cases || []" stripe>
            <el-table-column type="selection" width="55" />
            <el-table-column prop="title" label="用例标题" min-width="200" />
            <el-table-column prop="status" label="状态" width="100" />
            <el-table-column prop="priority" label="优先级" width="100" />
            <el-table-column label="操作" width="100" fixed="right">
              <template #default="{ row }">
                <el-button
                  type="danger"
                  size="small"
                  text
                  @click="handleRemoveTestCase(row.id)"
                  v-if="!isCompletedStatus(testPlan?.status || '')"
                >
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 执行记录 -->
      <el-tab-pane label="执行记录" name="executions">
        <div class="executions-section">
          <div class="section-header">
            <span>执行记录 ({{ testPlan?.executions?.length || 0 }})</span>
            <el-button
              type="primary"
              size="small"
              @click="handleExecuteTestCase"
              v-if="!isCompletedStatus(testPlan?.status || '')"
            >
              <el-icon><Plus /></el-icon>
              执行用例
            </el-button>
          </div>
          <el-table :data="testPlan?.executions || []" stripe>
            <el-table-column prop="test_case_title" label="用例标题" min-width="200" />
            <el-table-column prop="execution_result" label="执行结果" width="120">
              <template #default="{ row }">
                <el-tag :type="getExecutionResultType(row.execution_result)">
                  {{ getExecutionResultLabel(row.execution_result) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="executed_by_name" label="执行人" width="120" />
            <el-table-column prop="execution_date" label="执行时间" width="180">
              <template #default="{ row }">
                {{ formatDateTime(row.execution_date) }}
              </template>
            </el-table-column>
            <el-table-column prop="notes" label="备注" min-width="200" show-overflow-tooltip />
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 统计信息 -->
      <el-tab-pane label="统计信息" name="statistics">
        <div class="statistics-section">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-statistic title="总用例数" :value="statistics?.total || 0" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="已执行" :value="statistics?.executed || 0" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="未执行" :value="statistics?.not_executed || 0" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="通过率" :value="statistics?.pass_rate || 0" suffix="%" />
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="6">
              <el-statistic title="通过" :value="statistics?.passed || 0" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="失败" :value="statistics?.failed || 0" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="阻塞" :value="statistics?.blocked || 0" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="跳过" :value="statistics?.skipped || 0" />
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
    </div>

    <!-- 执行用例对话框 -->
    <el-dialog
      v-model="executeDialogVisible"
      title="执行测试用例"
      width="600px"
    >
      <el-form
        ref="executeFormRef"
        :model="executeForm"
        :rules="executeFormRules"
        label-width="120px"
      >
        <el-form-item label="测试用例" prop="test_case_id">
          <el-select
            v-model="executeForm.test_case_id"
            placeholder="选择测试用例"
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="tc in availableTestCasesForExecution"
              :key="tc.id"
              :label="tc.title"
              :value="tc.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="执行结果" prop="execution_result">
          <el-radio-group v-model="executeForm.execution_result">
            <el-radio value="passed">通过</el-radio>
            <el-radio value="failed">失败</el-radio>
            <el-radio value="blocked">阻塞</el-radio>
            <el-radio value="skipped">跳过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input
            v-model="executeForm.notes"
            type="textarea"
            :rows="3"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="executeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveExecution" :loading="executing">
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 完成计划对话框 -->
    <el-dialog
      v-model="completeDialogVisible"
      title="完成测试计划"
      width="500px"
    >
      <p>确定要完成测试计划吗？完成后将无法继续执行用例。</p>
      <template #footer>
        <el-button @click="completeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleComplete" :loading="completing">
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 从用例库添加用例对话框 -->
    <el-dialog
      v-model="addCasesDialogVisible"
      title="从用例库添加用例"
      width="900px"
      :close-on-click-modal="false"
    >
      <div class="add-cases-dialog">
        <!-- 左侧：文件夹树 -->
        <div class="dialog-left">
          <div class="folder-tree-header">
            <span>用例库</span>
            <el-input
              v-model="caseSearchKeyword"
              placeholder="搜索用例..."
              clearable
              size="small"
              style="width: 100%; margin-top: 8px"
              @input="handleCaseSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
          <div class="folder-tree-wrapper">
            <el-tree
              ref="caseFolderTreeRef"
              v-loading="foldersLoading"
              :data="folderTreeData"
              :props="treeProps"
              node-key="id"
              :expand-on-click-node="false"
              :highlight-current="true"
              :default-expand-all="false"
              :filter-node-method="filterFolderNode"
              @node-click="handleFolderNodeClick"
            >
              <template #default="{ node, data }">
                <div class="tree-node">
                  <span class="node-label">
                    <el-icon class="node-icon"><Folder /></el-icon>
                    {{ node.label }}
                  </span>
                  <span class="node-count" v-if="data.test_case_count > 0">
                    ({{ data.test_case_count }})
                  </span>
                </div>
              </template>
            </el-tree>
            <div v-if="!foldersLoading && folderTreeData.length === 0" class="empty-state">
              <el-empty description="暂无文件夹" :image-size="60" />
            </div>
          </div>
        </div>

        <!-- 右侧：用例列表 -->
        <div class="dialog-right">
          <div class="test-cases-header">
            <span>测试用例列表</span>
            <span v-if="selectedFolderName" class="folder-name">
              ({{ selectedFolderName }})
            </span>
          </div>
          <el-table
            ref="testCasesTableRef"
            v-loading="testCasesLoading"
            :data="availableTestCases"
            stripe
            height="400px"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="title" label="用例标题" min-width="200" show-overflow-tooltip />
            <el-table-column prop="type" label="类型" width="120">
              <template #default="{ row }">
                {{ getTestCaseTypeLabel(row.type) }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag size="small">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="priority" label="优先级" width="100">
              <template #default="{ row }">
                <el-tag size="small" :type="getPriorityType(row.priority)">
                  {{ row.priority }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <div class="selected-count">
            已选择 {{ selectedTestCases.length }} 个用例
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="addCasesDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="handleSaveAddCases"
          :loading="addingCases"
          :disabled="selectedTestCases.length === 0"
        >
          确定添加 ({{ selectedTestCases.length }})
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search, Folder, ArrowLeft } from '@element-plus/icons-vue'
import {
  getTestPlanById,
  executeTestCase,
  completeTestPlan,
  updateTestPlan,
  type TestPlanDetailResponse
} from '@/api/test-plan'
import {
  getTestCases,
  getTestCaseFolders,
  type TestCase
} from '@/api/test-case'
import {
  getExecutionResultLabel,
  getExecutionResultType,
  getTestCaseTypeLabel,
  TEST_CASE_PRIORITY_OPTIONS
} from '@/types/test-case'
import { formatDateTime } from '@/utils/date'
import { useStateStore } from '@/stores/state'
import { ModuleType } from '@/types/core'

const router = useRouter()
const route = useRoute()
const stateStore = useStateStore()

// 从路由参数获取测试计划ID
const testPlanId = computed(() => route.params.id as string)

// 响应式数据
const loading = ref(false)
const testPlan = ref<TestPlanDetailResponse | null>(null)
const activeTab = ref('info')

// 执行对话框
const executeDialogVisible = ref(false)
const executeFormRef = ref()
const executing = ref(false)
const executeForm = reactive({
  test_case_id: '',
  execution_result: 'passed' as 'passed' | 'failed' | 'blocked' | 'skipped',
  notes: ''
})

const executeFormRules = {
  test_case_id: [{ required: true, message: '请选择测试用例', trigger: 'change' }],
  execution_result: [{ required: true, message: '请选择执行结果', trigger: 'change' }]
}

// 完成对话框
const completeDialogVisible = ref(false)
const completing = ref(false)

// 添加用例对话框
const addCasesDialogVisible = ref(false)
const addingCases = ref(false)
const caseFolderTreeRef = ref()
const testCasesTableRef = ref()
const foldersLoading = ref(false)
const testCasesLoading = ref(false)
const folderTreeData = ref<any[]>([])
const availableTestCases = ref<TestCase[]>([])
const selectedTestCases = ref<TestCase[]>([])
const selectedFolderId = ref<string>('')
const selectedFolderName = ref<string>('')
const caseSearchKeyword = ref<string>('')

const treeProps = {
  children: 'children',
  label: 'name'
}

// 计算属性
const statistics = computed(() => testPlan.value?.statistics)
const availableTestCasesForExecution = computed(() => {
  if (!testPlan.value) return []
  const executedCaseIds = new Set(testPlan.value.executions?.map(e => e.test_case_id) || [])
  return testPlan.value.test_cases?.filter(tc => !executedCaseIds.has(tc.id)) || []
})

// 获取状态标签（从状态管理系统）
const getStatusLabel = (status: string) => {
  if (!status) return '-'
  const state = stateStore.getStateByCode(status, ModuleType.TEST_PLAN)
  return state?.name || status
}

// 获取状态标签类型（从状态管理系统）
const getStatusType = (status: string): 'success' | 'warning' | 'info' | 'danger' => {
  if (!status) return 'info'
  const state = stateStore.getStateByCode(status, ModuleType.TEST_PLAN)
  if (state) {
    // 根据颜色映射到Element Plus的tag type
    const colorMap: Record<string, 'success' | 'primary' | 'warning' | 'info' | 'danger'> = {
      '#67C23A': 'success',
      '#409EFF': 'primary',
      '#E6A23C': 'warning',
      '#F56C6C': 'danger',
      '#909399': 'info',
      '#52c41a': 'success',
      '#faad14': 'warning',
      '#d9d9d9': 'info'
    }
    return colorMap[state.color] || 'info'
  }
  return 'info'
}

// 检查是否为完成状态
const isCompletedStatus = (status: string): boolean => {
  if (!status) return false
  const state = stateStore.getStateByCode(status, ModuleType.TEST_PLAN)
  if (state) {
    // 检查状态名称是否包含"完成"、"已完成"等关键词
    const name = state.name || ''
    return name.includes('完成') || name.includes('已完成') || name.includes('completed')
  }
  // 向后兼容：检查状态代码
  return status === 'completed'
}

// 加载状态数据
onMounted(async () => {
  await stateStore.fetchStates({ module_type: ModuleType.TEST_PLAN })
})

// 返回按钮处理
const handleBack = () => {
  router.push('/test-management/plans')
}

// 加载数据
const loadTestPlan = async () => {
  if (!testPlanId.value) return
  
  loading.value = true
  try {
    const response = await getTestPlanById(testPlanId.value)
    if (response.data) {
      testPlan.value = response.data
    } else {
      ElMessage.error('获取测试计划详情失败：数据为空')
      testPlan.value = null
    }
  } catch (error: any) {
    console.error('加载测试计划详情失败:', error)
    ElMessage.error(error?.message || '加载测试计划详情失败')
    testPlan.value = null
  } finally {
    loading.value = false
  }
}

// 加载文件夹树
const loadFolders = async () => {
  if (!testPlan.value) return
  
  foldersLoading.value = true
  try {
    const params: any = {
      tree: true
    }
    if (testPlan.value.project_id) {
      params.project_id = testPlan.value.project_id
    }
    
    const response = await getTestCaseFolders(params)
    
    if (response && response.success && response.data) {
      const data = response.data
      if (Array.isArray(data)) {
        folderTreeData.value = data
      } else if (data && typeof data === 'object' && 'items' in data && Array.isArray((data as any).items)) {
        folderTreeData.value = (data as any).items
      } else {
        folderTreeData.value = []
      }
    } else {
      folderTreeData.value = []
    }
  } catch (error: any) {
    console.error('加载文件夹树失败:', error)
    folderTreeData.value = []
  } finally {
    foldersLoading.value = false
  }
}

// 加载测试用例列表
const loadTestCases = async (folderId?: string) => {
  if (!testPlan.value) return
  
  testCasesLoading.value = true
  try {
    const params: any = {
      page: 1,
      size: 100,
      project_id: testPlan.value.project_id
    }
    
    if (folderId) {
      params.folder_id = folderId
    }
    
    // 排除已添加的用例
    if (testPlan.value.test_case_ids && testPlan.value.test_case_ids.length > 0) {
      // 这里需要在后端支持排除，或者前端过滤
    }
    
    const result = await getTestCases(params)
    let cases = result.items || []
    
    // 前端过滤：排除已添加的用例
    if (testPlan.value.test_case_ids && testPlan.value.test_case_ids.length > 0) {
      const existingIds = new Set(testPlan.value.test_case_ids)
      cases = cases.filter((tc: TestCase) => !existingIds.has(tc.id))
    }
    
    // 应用搜索过滤
    if (caseSearchKeyword.value) {
      const keyword = caseSearchKeyword.value.toLowerCase()
      cases = cases.filter((tc: TestCase) => 
        tc.title?.toLowerCase().includes(keyword) ||
        tc.description?.toLowerCase().includes(keyword)
      )
    }
    
    availableTestCases.value = cases
  } catch (error: any) {
    console.error('加载测试用例失败:', error)
    ElMessage.error(error?.message || '加载测试用例失败')
    availableTestCases.value = []
  } finally {
    testCasesLoading.value = false
  }
}

// 文件夹节点过滤
const filterFolderNode = (value: string, data: any) => {
  if (!value) return true
  return data.name.toLowerCase().includes(value.toLowerCase())
}

// 用例搜索
const handleCaseSearch = () => {
  loadTestCases(selectedFolderId.value)
}

// 文件夹节点点击
const handleFolderNodeClick = (data: any) => {
  selectedFolderId.value = data.id
  selectedFolderName.value = data.name
  loadTestCases(data.id)
}

// 选择变化
const handleSelectionChange = (selection: TestCase[]) => {
  selectedTestCases.value = selection
}

// 获取优先级类型
const getPriorityType = (priority: string) => {
  const option = TEST_CASE_PRIORITY_OPTIONS.find(opt => opt.value === priority)
  if (!option) return 'info'
  
  if (option.value === 'high' || option.value === 'urgent' || option.value === 'critical' || option.value === 'blocker') {
    return 'danger'
  } else if (option.value === 'medium') {
    return 'warning'
  }
  return 'info'
}

// 事件处理
const handleAddTestCases = async () => {
  if (!testPlan.value) return
  
  // 重置状态
  selectedTestCases.value = []
  selectedFolderId.value = ''
  selectedFolderName.value = ''
  caseSearchKeyword.value = ''
  availableTestCases.value = []
  
  // 加载文件夹树
  await loadFolders()
  
  // 加载所有用例（不限制文件夹）
  await loadTestCases()
  
  addCasesDialogVisible.value = true
}

// 保存添加的用例
const handleSaveAddCases = async () => {
  if (!testPlan.value || selectedTestCases.value.length === 0) return
  
  try {
    addingCases.value = true
    
    // 合并现有的用例ID和新选择的用例ID
    const existingIds = testPlan.value.test_case_ids || []
    const newIds = selectedTestCases.value.map(tc => tc.id)
    const allIds = [...new Set([...existingIds, ...newIds])]
    
    // 更新测试计划
    await updateTestPlan(testPlanId.value, {
      test_case_ids: allIds
    })
    
    ElMessage.success(`成功添加 ${selectedTestCases.value.length} 个测试用例`)
    addCasesDialogVisible.value = false
    await loadTestPlan()
  } catch (error: any) {
    console.error('添加测试用例失败:', error)
    ElMessage.error(error?.message || '添加测试用例失败')
  } finally {
    addingCases.value = false
  }
}

// 移除用例
const handleRemoveTestCase = async (testCaseId: string) => {
  if (!testPlan.value) return
  
  try {
    await ElMessageBox.confirm(
      '确定要从测试计划中移除这个用例吗？',
      '确认移除',
      {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }
    )
    
    const existingIds = testPlan.value.test_case_ids || []
    const newIds = existingIds.filter(id => id !== testCaseId)
    
    await updateTestPlan(testPlanId.value, {
      test_case_ids: newIds
    })
    
    ElMessage.success('移除用例成功')
    await loadTestPlan()
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('移除用例失败:', error)
      ElMessage.error(error?.message || '移除用例失败')
    }
  }
}

const handleExecuteTestCase = () => {
  executeForm.test_case_id = ''
  executeForm.execution_result = 'passed'
  executeForm.notes = ''
  executeDialogVisible.value = true
}

const handleSaveExecution = async () => {
  if (!executeFormRef.value) return
  
  try {
    await executeFormRef.value.validate()
    executing.value = true
    
    await executeTestCase(testPlanId.value, {
      test_case_id: executeForm.test_case_id,
      execution_result: executeForm.execution_result,
      notes: executeForm.notes
    })
    
    ElMessage.success('执行用例成功')
    executeDialogVisible.value = false
    await loadTestPlan()
  } catch (error: any) {
    if (error !== false) {
      console.error('执行用例失败:', error)
      ElMessage.error(error?.message || '执行用例失败')
    }
  } finally {
    executing.value = false
  }
}

const handleComplete = async () => {
  try {
    completing.value = true
    await completeTestPlan(testPlanId.value, {})
    ElMessage.success('完成测试计划成功')
    completeDialogVisible.value = false
    await loadTestPlan()
  } catch (error: any) {
    console.error('完成测试计划失败:', error)
    ElMessage.error(error?.message || '完成测试计划失败')
  } finally {
    completing.value = false
  }
}

// 初始化
onMounted(() => {
  loadTestPlan()
})

watch(() => testPlanId.value, () => {
  loadTestPlan()
})
</script>

<style scoped lang="scss">
.test-plan-detail-page {
  padding: 20px;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EBEEF5;
    
    .header-left {
      display: flex;
      align-items: center;
      gap: 16px;
      
      .back-button {
        padding: 0;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 4px;
        
        .el-icon {
          font-size: 16px;
        }
      }
      
      .page-title {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: #303133;
      }
    }
    
    .header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }
  }
}

.test-plan-detail {
  .test-cases-section,
  .executions-section,
  .statistics-section {
    padding: 20px 0;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 600;
    }
  }
}

.add-cases-dialog {
  display: flex;
  gap: 20px;
  height: 500px;
  
  .dialog-left {
    width: 280px;
    border-right: 1px solid #EBEEF5;
    display: flex;
    flex-direction: column;
    
    .folder-tree-header {
      padding-bottom: 12px;
      font-weight: 600;
      font-size: 14px;
    }
    
    .folder-tree-wrapper {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      
      :deep(.el-tree) {
        .tree-node {
          display: flex;
          align-items: center;
          width: 100%;
          
          .node-label {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            
            .node-icon {
              color: #409EFF;
              flex-shrink: 0;
            }
            
            span {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          
          .node-count {
            color: #909399;
            font-size: 12px;
            margin-left: 4px;
            flex-shrink: 0;
          }
        }
        
        .el-tree-node__content {
          height: 32px;
          padding: 0 8px;
          border-radius: 4px;
          
          &:hover {
            background-color: #f5f7fa;
          }
        }
        
        .el-tree-node.is-current > .el-tree-node__content {
          background-color: #e6f7ff;
          color: #409EFF;
        }
      }
      
      .empty-state {
        padding: 40px 20px;
        text-align: center;
      }
    }
  }
  
  .dialog-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    
    .test-cases-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      font-weight: 600;
      font-size: 14px;
      
      .folder-name {
        color: #909399;
        font-weight: normal;
      }
    }
    
    .selected-count {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid #EBEEF5;
      color: #606266;
      font-size: 14px;
    }
  }
}
</style>

